<template>
	<div class="middle">
		<div class="middlebg"></div>
		<el-tabs type="border-card" class="content" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
			  <!--视频区域-->
      <div>
        <span slot="label" class="title1 " @click="plan">
          <i class="el-icon-tickets"></i>
          &nbsp;&nbsp;教案
        </span>
        <span slot="label" class="title1 planTitle" @click="video">
          <i class="el-icon-caret-right"></i>
          &nbsp;&nbsp;视频
        </span>
        <span slot="label" class="title1" @click="book">
          <i class="el-icon-setting"></i>
          &nbsp;&nbsp;图书
        </span>
      <span class="search">
        <el-input clearable style="width: 200px;" v-model="videoTitle" placeholder="请输入内容"></el-input>
        <el-button type="danger" @click="searchVideo">搜索</el-button>
      </span>
        <!--视频类型-->
        <div class="one">
          <div class="circle"></div>
          <div class="adaptive">类型：</div>
          <div type="success"class="Greens" :class ="{searchchange6:changegreen6 == item.id}" plain v-for = "item in videoType" @click="vcontent(videoid = item.id)">{{item.title}}</div>
          <!--<button class="Greens" v-for = "item in videoType" @click="vcontent(videoid = item.id)">{{item.title}}</button>-->
        </div>
        <!--视频资源-->
        <el-row class="somevideo">
        <el-col class="sv" v-for="item in videoList" :key="item.id">
          <div class="grid-content bg-purple-light video" @click="videocontent(item.id)">
            <div class="player">
            <img :src="item.icon_path" alt="" />
          </div>
          <div class="video-title">{{item.title}}</div>
          </div>
        </el-col>
      </el-row>
      <!--视频分页-->
        <el-pagination
          class="fenye"
          @size-change="videoSizeChange"
          @current-change="videoCurrentChange"
          :current-page="videorows"
          :page-sizes="pagesizes"
          :page-size="videorows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="videototal"
          v-if ="videoList.length == 0? false :true">
        </el-pagination>
      </div>
			</el-tabs>
	</div>
</template>

<script>
	import axios from '@/assets/js/axios'
	export default {
		data() {
      return {
        loading:true,
        videoType:[],//视频类型
        changegreen6:false,//按钮变色
        videoList:[],//获取视频资源
        videorows:12,
        videopage:1,
        pagesizes:[16,20,24,28],
        videototal:20,
        videoid:'',
        videoTitle:'',
      }
		},
		methods: {
			video(){
				this.$router.push({path:'/video'})
			},
			plan(){
				this.$router.push({path:'/resources'})
			},
			book(){
				this.$router.push({path:'/bookList'})
			},
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
      },

      //获取视频类型
      getvideoType(){
        this.$http.post('/api/video/videoType')
          .then(res=>{
            this.videoType = res.data.data
          })
      },
      //获取视频资源
      getvideoList(){
        this.$http.post('/api/video/videoList',{
          rows:this.videorows,
          page:this.videopage,
          cat_id:this.videoid,
      title:this.videoTitle,
        })
          .then(res=>{
            this.videoList = res.data.data
            this.videototal = res.data.num
        this.loading = false
          })
      },
      //获取视频每页显示多少条数据
      videoSizeChange(val) {
        this.videorows = val
        this.getvideoList()
      },
      //视频切换到第几页
      videoCurrentChange(val){
        this.videopage = val
        this.getvideoList()
      },
		  searchVideo(){
			  this.getvideoList()
		  },
      //根据视频类型获取对应内容
      vcontent(id){
        this.getvideoList()
			  this.changegreen6 = id
      },
      videocontent(id){
        this.$router.push({path:'/videocontent/'+id})
      },
	   },
	   created(){
			//获取视频类型
			this.getvideoType()
			//获取视频资源
			this.getvideoList()
	   }
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
		color: #00b02d;
	}
</style>
<style lang="less" scoped>
	.middle {
		height: 98%;
	    width: 96%;
	    background:repeat center top;
	    background-size: contain;
	    padding-left: 2%;
	    padding-right: 2%;
	    padding-top: 1%;
	    .middlebg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			background: url(../../assets/image/bg-img.png) no-repeat center;
			background-size: 100%;
		}
	    .content {
	    	padding: 0;
			position: relative;
			.search {
				position: absolute;
				right: 40px;
				top: 15px;
			}
	    }
	     .title1 {
	    	display: inline-block;
	    	padding: 0 10px;
	    	margin-bottom: 20px;
	    	height: 40px;
	    	line-height: 40px;
	    	cursor: pointer;
	    	&:hover {
	    		background: #00b02d;
	    		color: #fff;
	    	}
	    }
	    .planTitle {
	    	color: #fff;
	    	background: #00B02D;
	    }
	    .one, .two ,.three{
	    	margin: 5px 0;
	    	margin-bottom: 25px;
    		.circle {
				display: inline-block;
				width: 10px;
				height: 10px;
				background: #606266;
				border-radius: 50%;
				margin: 0 10px;
			}
			.adaptive {
				display: inline-block
			}
			.greens {
				display: inline-block;
				background-color: #00B02D;
				margin: 0 10px;
				width: 70px;
				text-align: center;
				padding: 3px;
				border-radius: 5px;
				color: #fff;
				font-size: 16px;
			}
			.green {
				display: inline-block;
				margin: 0 10px;
				width: 70px;
				background: #f0f9eb;
				text-align: center;
				padding: 2px 7px;
				border-radius: 5px;
				color: #67c23a;
				border:1px solid #c2e7b0;
				cursor: pointer;
				font-size: 14px;
			}
			.Greens {
				margin: 0 10px;
				margin-top: 5px;
				padding: 2px 7px;
				display: inline-block;
				background: #f0f9eb;
				border-radius: 5px;
				color: #67c23a;
				border:1px solid #c2e7b0;
				cursor: pointer;
				font-size: 14px;
			}
			.searchchange,.searchchange2,.searchchange3,.searchchange4,.searchchange5,.searchchange6{
				background: #67c23a;
				color: #fff;
			}
	    }
	    .xian {
	    	padding: 0 50px;
	    	margin: 30px 0;
	    	border-bottom: 1px solid #ccc;
	    	font-size: 14px;
	    	.run {
	    		margin: 20px 0;
	    		overflow: hidden;/*超出部分隐藏*/
		        white-space: nowrap;/*不换行*/
		        text-overflow:ellipsis;/*超出部分文字以...显示*/
		        width: 260px;
	    		.title {
	    			display: inline-block;
	    			cursor: pointer;
	    		}
	    	}
	    }
	    .fenye {
	    	text-align: center;
	    }
	    .somevideo {
	    	text-align: center;
	    	.sv {
	    		width: 25%;
	    	}
	    	.video {
	    		margin-bottom: 20px;
				cursor: pointer;
	    		.player{
		    		img {
		    			width: 200px;
		    			height: 110px;
		    		}
	    		}
	    		.video-title {
		    		font-size: 0.8rem;
		    	}
	    	}

	    }
	    .somebook {
	    	.book {
	    		position: relative;
	    		margin-bottom: 30px;
	    		cursor: pointer;
	    		img {
	    			width: 160px;
	    			height: 220px;
	    		}
	    		.message {
	    			position: absolute;
	    			width: 50%;
	    			top: 0px;
	    			left: 180px;
	    			div {
	    				height: 30px;
	    				line-height: 30px;
	    				font-size: 0.8rem;
	    				overflow: hidden;/*超出部分隐藏*/
				        white-space: nowrap;/*不换行*/
				        text-overflow:ellipsis;/*超出部分文字以...显示*/
				        width: 100%;
	    			}
	    			.bookname {
	    				font-size: 1rem;
	    				color:midnightblue;
	    				font-weight: 700;
	    			}
	    		}
	    	}
	    }
	}

</style>
